<template>
    <div>
        <div class="outmain ba_f heighthv pad_20 bor_rad5">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>云喇叭设置</span>
                </div>
            </div>
            <div class="mar_t20 flex-bet flex-y-top">
                <div class="flex-g-1">
                    <el-form ref="form" :model="form" label-width="180px">
                        <el-form-item label="喇叭名称" prop="name" :required="true">
                            <el-input v-model="form.name" placeholder="请输入喇叭名称"></el-input>
                        </el-form-item>
                        <el-form-item label="云喇叭ID" prop="sn" :required="true">
                            <el-input v-model="form.sn" placeholder="请输入云音响的ID"></el-input>
                            <div class="yb_margin lh16">喇叭后面的SN码</div>
                        </el-form-item>
                        <el-form-item label="代理商token" prop="token" :required="true">
                            <el-input v-model="form.token" placeholder="请输入代理商token"></el-input>
                            <div class="yb_margin lh16">代理商的 token, 预先通过安全渠道分配，使得代理商对该 SPEAKERID 有操作权限</div>
                        </el-form-item>
                        <el-form-item label="播放语速">
                            <el-input v-model="form.speed" placeholder="请输入播放语速"></el-input>
                            <div class="yb_margin lh16">语速，速度范围为0-100，默认为65</div>
                        </el-form-item>
                        <el-form-item label="版本">
                          <el-select v-model="form.version" placeholder="请选择版本">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                          </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="submitForm">立即设置</el-button>
        </div>
    </div>
</template>
<script>
    import {getStoreConfig,postStoreConfig} from "@/api/setup";
    import {mapState} from "vuex";

    export default {
        computed: {
            ...mapState(['storeId']),
        },
        created() {
            this.edit()
        },
        data() {
            return {
                form: {
                    name: '',
                    sn: '',
                    token: '',
                    speed: '65',
                    version: '1',
                },
                options: [
                {
                  value: '1',
                  label: '1'
                }, {
                  value: '2',
                  label: '2'
                }, {
                  value: '3',
                  label: '3'
                }, {
                  value: '4',
                  label: '4'
                }, {
                  value: '5',
                  label: '5'
                },
                {
                  value: '6',
                  label: '6'
                }, {
                  value: '7',
                  label: '7'
                }, {
                  value: '8',
                  label: '8'
                }, {
                  value: '9',
                  label: '9'
                }
              ],
                collapseName:'',
            }
        },
        methods: {
            async edit(){
                const {data} = await getStoreConfig({ident: 'voice',storeId:this.storeId})
                this.form2 = this.form
                this.form = Object.assign(this.form2, data);
            },
            async submitForm() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        this.form.ident = 'voice'
                        this.form.identName = '云喇叭设置'
                        this.form.storeId = this.storeId
                        const {msg} = await postStoreConfig(this.form);
                        this.$baseMessage(msg, "success");
                        this.$router.go(-1)
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>
